<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="800px" :title="getTitle" @ok="handleSubmit">
    <BasicForm @register="registerForm" class="menuForm">
      <template #sqlField="{ model, field }">
        <div class="kxcs">{{ model[field] }}</div>
      </template>
      <template #test="{ model, field }">
        <div>
          <a-button
            shape="circle"
            type="primary"
            preIcon="ant-design:plus-outlined"
            @click="handleAdd"
            style="margin-left: 128px"
            :disabled="!showFooter"
            >&nbsp;</a-button
          >
          添加SQL调试
        </div>
      </template>
      <template #datasource="{ model }">
        <a-button :disabled="!showFooter" @click="handleChoice(model['ruleActionType'])">请选择</a-button>
      </template>
    </BasicForm>
  </BasicDrawer>
  <BasicModal @register="registerModal" title="SQL调试" @ok="handleOk" @cancel="handleCancel" :width="600" :height="380" :canFullscreen="false">
    <BasicForm @register="registerForm1" />
    <template #footer>
      <a-button type="primary" @click="handleTest">测试</a-button>
    </template>
  </BasicModal>
  <RuleSourceModal @register="registerModal2" @success="reload2" />
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { formSchema, formSchema1 } from './rule.data';
  import RuleSourceModal from './ruleSourceModal.vue';
  // import { testRequest, saveOrUpdateAuth } from './auth/api';
  const isUpdate = ref(true);
  const emit = defineEmits(['success', 'register']);
  const [registerModal, { openModal, closeModal }] = useModal();
  const [registerModal2, { openModal: openModal2, closeModal: closeModal2 }] = useModal();
  const [registerForm, { resetSchema, resetFields, validate, setFieldsValue, setProps }] = useForm({
    labelCol: {
      md: { span: 4 },
      sm: { span: 6 },
    },
    wrapperCol: {
      md: { span: 18 },
      sm: { span: 18 },
    },
    compact: true,
    schemas: formSchema,
    showActionButtonGroup: false,
  });
  const [registerForm1, { validate: validate1, resetFields: resetFields1 }] = useForm({
    schemas: formSchema1,
    //隐藏操作按钮
    showActionButtonGroup: false,
  });
  const showFooter = ref(true);
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    resetFields();
    showFooter.value = data?.showFooter ?? true;
    isUpdate.value = !!data?.isUpdate;
    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
    if (unref(isUpdate)) {
      setFieldsValue({
        ...data.record,
      });
    }
    setProps({ disabled: !data?.showFooter });
  });
  //获取弹窗标题
  const getTitle = computed(() => (!unref(isUpdate) ? '新增规则' : '编辑规则'));

  //提交事件
  async function handleSubmit() {
    try {
      const values = await validate();
      setDrawerProps({ confirmLoading: true });
      //提交表单
      console.log(values);
      // await saveOrUpdateAuth(values, isUpdate.value);
      closeDrawer();
      emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }

  function handleAdd() {
    openModal(true, {});
  }

  function handleCancel() {
    resetFields1();
    closeModal();
  }

  async function handleTest() {
    const values = await validate1();
    handleCancel();
  }

  function handleChoice(record) {
    openModal2(true, {
      record,
      isUpdate: true,
    });
  }
</script>
<style scoped>
  :deep(:where(.css-dev-only-do-not-override-udyjmm).ant-divider-horizontal.ant-divider-with-text) {
    font-weight: 700;
  }
  .kxcs {
    width: 100%;
    min-height: 30px;
    padding: 5px 0 0 5px;
    background: #eee;
    word-break: break-all;
  }
  :deep(.CodeMirror-foldgutter),
  :deep(.CodeMirror-linenumber),
  :deep(.CodeMirror-gutters) {
    display: none;
  }
</style>
